<template>
  <el-dialog :visible.sync="visible" v-dialogDrag title="变更人员" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <el-table class="tl-table" :data="baseRoleDataList" border stripe>
      <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
      <el-table-column prop="name" label="流程角色" header-align="center" :show-overflow-tooltip="true" width="200px"></el-table-column>
      <el-table-column label="人员选择" header-align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.rolelnslist" :disabled="disableEditSubmit" :placeholder="scope.row.roleuserlist.length === 1 && scope.row.roleuserlist[0].id === null ? '流程角色未匹配到有效人员，请联系管理员' : '请选择'" style="width:100%" value-key="id" filterable multiple clearable>
            <el-option v-for="item in scope.row.roleuserlist" :key="item.id" :label="item.username" :value="item.usercode">
              <span style="float: left">{{ item.username }}</span>
              <span class="count" v-if="item.count > 0">
                <el-badge class="mark" :value="item.count" />
              </span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSave" :loading="saveLoading">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
import { mixin_approval } from '@tapui/mixins/mixin_approval'
/** 子组件 */
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'roleEdit',
  mixins: [mixin_edit, mixin_approval],
  components: {},
  data() {
    return {
      description: '流程角色-列表查询',
      urlPrefix: '/base/flowRole/',
      url: {
        queryFlowRoleList: '/base/flowRole/queryElementList',
        saveUserRole: '/base/flowRoleIns/batchSave'
      },
      defaultSelectUserIds: '',
      filtersInfo: {
        qry_flowid: this.flowid
      },
      baseRoleDataList: [],
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      },
      flowid: 0,
      flowinsid: 0,
      approvalNodeModel: {}
    }
  },
  methods: {
    open() {
      let paraMap = {}
      paraMap.flowid = this.flowid
      paraMap.flowinsid = this.flowinsid
      paraMap.view = false
      paraMap.sourceid = this.approvalNodeModel.sourceid
      paraMap.sourcetype = this.approvalNodeModel.sourcetype
      getAction(this.url.queryFlowRoleList, paraMap).then((res) => {
        if (res.success) {
          this.baseRoleDataList = res.result
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    doSave() {
      for (let i = 0; i < this.baseRoleDataList.length; i++) {
        if (this.baseRoleDataList[i].rolelnslist.length === 0) {
          this.$tap.alert('请至少选择一个人员')
          return
        }
      }
      let paraMap = {}
      paraMap.flowid = this.flowid
      paraMap.flowinsid = this.flowinsid
      paraMap.dataList = this.baseRoleDataList
      postAction(this.url.saveUserRole, paraMap)
        .then((res) => {
          if (res.success) {
            this.$tap.message('保存成功')
            this.visible = false
            this.$emit('refresh')
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 480px;
}
.count {
  float: right;
  .mark {
    padding-top: 5px;
  }
}
.red-bg {
  background: red;
}
</style>
